<template>
  <div>
    <h2>电影子组件传递的电影数据是：{{ movieName }}</h2>
    <h2>歌曲子组件传递的电影数据是：{{ songName }}</h2>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <Movie :getMovieName="getMovieName"></Movie>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
    <Song @zhoujielun="getSongName"></Song>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <!-- 另外，如果组件里想要原生的事件，需要加 .native -->
    <Song ref="sName" @click.native="showMessage"></Song>
  </div>
</template>

<script>
//先引用哪个，就先解析哪个
import Movie from "./components/Movie";
import Song from "./components/Song";
export default {
  name: "App",
  components: { Movie, Song },
  data() {
    return {
      movieName: "",
      songName: "",
    };
  },
  // 写法一：通过回调函数来获取子组价传递的数据
  methods: {
    getMovieName(movieName) {
      console.log("父组件App收到子组件传递的电影名：", movieName);
      this.movieName = movieName;
    },
    getSongName(songName) {
      console.log("父组件App收到子组件传递的歌曲名：", songName);
      this.songName = songName;
    },
    showMessage() {
      console.log("我是通过第二种方式（挂载）来获取子组件数据的");
    },
  },
  // 写法二：通过挂载的方式，灵活性更高
  mounted() {
    //写法一
    this.$refs.sName.$on("zhoujielun", this.getSongName);
    //写法二
    /*
    this.$refs.sName.$on("zhoujielun",(songName)=>{
      console.log("通过箭头函数处理数据");
      this.songName = songName;
    });
    */
  },
};
</script>

<style>
</style>